"use client"

import { motion, useAnimation, useInView } from "framer-motion"
import {
   BarChart,
   File,
   Globe,
   HeartHandshake,
   Rss,
   Shield,
} from "lucide-react"
import { useEffect, useId, useRef, useState } from "react"
import { ny } from "~/lib/utils"
import Marquee from "~/registry/default/ui/marquee"

const tiles = [
   {
      icon: <HeartHandshake className="size-full" />,
      bg: (
         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
      ),
   },
   {
      icon: <Globe className="size-full" />,
      bg: (
         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500 opacity-70 blur-[20px]"></div>
      ),
   },
   {
      icon: <File className="size-full" />,
      bg: (
         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-green-500 via-teal-500 to-emerald-600 opacity-70 blur-[20px]"></div>
      ),
   },
   {
      icon: <Shield className="size-full" />,
      bg: (
         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-600 opacity-70 blur-[20px]"></div>
      ),
   },
   {
      icon: <Rss className="size-full" />,
      bg: (
         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-orange-600 via-rose-600 to-violet-600 opacity-70 blur-[20px]"></div>
      ),
   },
   {
      icon: <BarChart className="size-full" />,
      bg: (
         <div className="pointer-events-none absolute left-1/2 top-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2 overflow-visible rounded-full bg-gradient-to-r from-gray-600 via-gray-500 to-gray-400 opacity-70 blur-[20px]"></div>
      ),
   },
]

function shuffleArray(array: any[]) {
   let currentIndex = array.length
   let randomIndex
   // While there remain elements to shuffle.
   while (currentIndex !== 0) {
      // Pick a remaining element.
      randomIndex = Math.floor(Math.random() * currentIndex)
      currentIndex--
      // And swap it with the current element.
      ;[array[currentIndex], array[randomIndex]] = [
         array[randomIndex],
         array[currentIndex],
      ]
   }
   return array
}

function Card(card: { icon: JSX.Element; bg: JSX.Element }) {
   const id = useId()
   const controls = useAnimation()
   const ref = useRef(null)
   const inView = useInView(ref, { once: true })

   useEffect(() => {
      if (inView) {
         controls.start({
            opacity: 1,
            transition: {
               delay: Math.random() * 2,
               ease: "easeOut",
               duration: 1,
            },
         })
      }
   }, [controls, inView])

   return (
      <motion.div
         key={id}
         ref={ref}
         initial={{ opacity: 0 }}
         animate={controls}
         className={ny(
            "relative size-20 cursor-pointer overflow-hidden rounded-2xl border p-4",
            // light styles
            "bg-white",
            // dark styles
            "transform-gpu dark:bg-transparent dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
         )}
      >
         {card.icon}
         {card.bg}
      </motion.div>
   )
}

export default function FeatureCard7() {
   const containerVariants = {
      initial: {},
      whileHover: {
         transition: {
            staggerChildren: 0.1,
         },
      },
   }
   const [randomTiles1] = useState(() => shuffleArray([...tiles]))
   const [randomTiles2] = useState(() => shuffleArray([...tiles]))
   const [randomTiles3] = useState(() => shuffleArray([...tiles]))
   const [randomTiles4] = useState(() => shuffleArray([...tiles]))

   return (
      <div className="relative size-full max-w-lg transform-gpu rounded-lg border bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] md:max-h-[500px] dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]">
         <motion.div
            variants={containerVariants}
            initial="initial"
            whileHover="whileHover"
            className="flex size-full cursor-pointer flex-col items-start justify-between"
         >
            <div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-center justify-center gap-y-1 overflow-hidden rounded-t-xl p-4">
               <div className="relative flex flex-col items-center justify-center gap-y-2 px-10">
                  <Marquee
                     reverse
                     className="-delay-[200ms] [--duration:20s]"
                     repeat={4}
                  >
                     {randomTiles1.map((review, idx) => (
                        <Card key={idx} {...review} />
                     ))}
                  </Marquee>
                  <Marquee reverse className="[--duration:30s]" repeat={4}>
                     {randomTiles2.map((review, idx) => (
                        <Card key={idx} {...review} />
                     ))}
                  </Marquee>
                  <Marquee
                     reverse
                     className="-delay-[200ms] [--duration:20s]"
                     repeat={4}
                  >
                     {randomTiles3.map((review, idx) => (
                        <Card key={idx} {...review} />
                     ))}
                  </Marquee>
                  <Marquee reverse className="[--duration:30s]" repeat={4}>
                     {randomTiles4.map((review, idx) => (
                        <Card key={idx} {...review} />
                     ))}
                  </Marquee>
                  <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
                  <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
               </div>
            </div>
            <div className="flex w-full flex-col items-start border-t border-neutral-200 p-4 dark:border-neutral-800">
               <h2 className="text-xl font-semibold">Integrations</h2>
               <p className="text-base font-normal text-neutral-500 dark:text-neutral-400">
                  Integrate with all your favourite apps
               </p>
            </div>
         </motion.div>
      </div>
   )
}
